<!--
 * @Author: your name
 * @Date: 2021-10-26 20:57:25
 * @LastEditTime: 2021-11-10 17:57:39
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit

 * @FilePath: \wisdom-education-admin-front-v1.0.2-master\src\components\invigilate\changemachine.vue
-->
<template>
  <el-dialog
    width="70%"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    @closed="closeDialog"
    title="任务管理"
  >
    <!-- 标签页 -->
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <!-- 添加 -->
      <el-tab-pane label="添加学员管理" name="addManage">
        <el-form v-model="manageForm">
          <el-form-item label="考试任务" prop="taskname">
            <el-tag>{{ manageForm.taskname }}</el-tag>
          </el-form-item>

          <el-form-item label="选择考场">
            <el-select
              v-model="manageForm.taskroomValue"
              @change="getExamStus()"
              placeholder="请选择考场"
            >
              <el-option
                v-for="item in examValue"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="考生名单" prop="infoStudentList">
            <el-table
              :data="manageForm.infoStudentList"
              @selection-change="handleSelectionChange"
              border
              stripe
              style="width: 100%"
            >
              <el-table-column type="selection" width="50"></el-table-column>

              <el-table-column
                label="姓名"
                align="center"
                prop="name"
              ></el-table-column>

              <el-table-column
                label="年级"
                align="center"
                prop="gradeName"
              ></el-table-column>
            </el-table>
          </el-form-item>
        </el-form>

        <!-- 学员分页 -->
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNumber"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="pageSize"
          :total="totalCount"
          layout="total, sizes, prev, pager, next, jumper"
        >
        </el-pagination>
      </el-tab-pane>

      <!-- 修改 -->
      <el-tab-pane label="修改学员管理" name="editManage">
        <el-form v-model="manageForm">
          <el-form-item label="考试任务" prop="taskname">
            <el-tag>{{ manageForm.taskname }}</el-tag>
          </el-form-item>

          <el-form-item label="选择考场">
            <el-select
              v-model="manageForm.taskroomValue"
              @change="getExamStus()"
              placeholder="请选择考场"
            >
              <el-option
                v-for="item in examValue"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="考生名单" prop="infoStudentList">
            <el-table
              :data="manageForm.infoStudentList"
              @selection-change="handleSelectionChange"
              border
              stripe
              style="width: 100%"
            >
              <el-table-column type="selection" width="50"></el-table-column>

              <el-table-column
                label="姓名"
                align="center"
                prop="studentName"
              ></el-table-column>

              <el-table-column
                label="年级"
                align="center"
                prop="gradeInfoName"
              ></el-table-column>
            </el-table>
          </el-form-item>
        </el-form>

        <!-- 学员分页 -->
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNumber"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="pageSize"
          :total="totalCount"
          layout="total, sizes, prev, pager, next, jumper"
        >
        </el-pagination>
      </el-tab-pane>
    </el-tabs>

    <!-- 底部 -->
    <span slot="footer">
      <el-button
        type="primary"
        v-if="activeName == 'addManage'"
        @click="addStuToExam"
        >确认添加</el-button
      >
      <el-button type="danger" v-else @click="delSelectStduent"
        >移除学员</el-button
      >
      <el-button @click="dialogVisible = false">取 消</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  name: "taskManage-addRoom-Student",
  props: {
    showFlag: {},
    taskobject: {},
  },
  data() {
    return {
      dialogVisible: false,
      manageForm: {
        taskname: "测试",
        //考场ID
        taskroomValue: null,
        infoStudentList: [],
        examTaskId:0,
      },
      //所有考场下拉框
      examValue: [],
      pageSize: 10,
      pageNumber: 1, //当前页
      totalCount: 0, //总数
      stuList: [], //要添加的学生数组
      activeName: "addManage", //标签页选择绑定,默认值
    };
  },
  watch: {
    showFlag(val) {
      this.dialogVisible = val;
    },
    taskobject() {
      this.manageForm.taskname = this.taskobject.name;
      this.manageForm.examTaskId = this.taskobject.id
    },
  },
  created() {},
  mounted() {
    this.dialogVisible = this.showFlag;
    this.getExamRoomList();
  },
  methods: {
    //切换标签页时触发
    handleClick() {
      this.manageForm.taskroomValue = null;
      this.manageForm.infoStudentList = [];
      this.totalCount = 0;
    },
    //对话框关闭事件
    closeDialog() {
      this.dialogVisible = false;
      this.manageForm.taskroomValue = null;
      this.manageForm.infoStudentList = [];
      this.totalCount = 0;
      this.$emit("closeDialog");
    },
    //添加事件
    addStuToExam() {
      this.getStuToRoom();
    },
    //考场列表
    getExamRoomList() {
      this.axios
        .get(this.$http.httpUrl(`/system/examRoom/getExamRoomList`))
        .then((response) => {
          var arr = response.data.data.dataList;
          arr.forEach((value, index) => {
            this.examValue.push({ value: value.id, label: value.name });
          });
        });
    },
    //选择考场时触发，获取学员列表
    getExamStus() {
      if (this.activeName == "addManage") {
        this.getInfoStudentList();
      } else {
        this.getExamRoomStudentList();
      }
    },
    //获取未添加的学员列表
    getInfoStudentList() {
      this.axios
        .get(this.$http.httpUrl("/system/student/selectNoTestRoomList"), {
          params: {
            pageNumber: this.pageNumber,
            pageSize: this.pageSize,
            // name: this.query.keyWord,
            //gradeInfoId: this.query.gradeInfoId,
            // roomId: this.manageForm.taskroomValue,
            examTaskId:this.manageForm.examTaskId
          },
        })
        .then((response) => {
          this.manageForm.infoStudentList = response.data.data.dataList;
          this.totalCount = response.data.data.total;
        });
    },

    // 获取考场学生
    getExamRoomStudentList() {
      this.axios
        .get(this.$http.httpUrl(`examroomstudent/getExamRoomStudentList`), {
          params: {
            examRoomId: this.manageForm.taskroomValue,
            pageNumber: this.pageNumber,
            pageSize: this.pageSize,
            examTaskId:this.manageForm.examTaskId
          },
        })
        .then((response) => {
          this.manageForm.infoStudentList = response.data.data.dataList;
          this.totalCount = response.data.data.total;
          // console.log("列表" , this.manageForm.infoStudentList);
        });
    },

    //多选事件
    handleSelectionChange(val) {
      this.stuList = val;
      // console.log(this.stuList);
    },

    // 添加学生到考场
    getStuToRoom() {
      const that = this;
      const roomStudent = {
        roomId: this.manageForm.taskroomValue, // 获取考场id
        examTaskId: this.manageForm.examTaskId,
        students: this.stuList, // 学生数组
      };
      this.axios
        .post(
          this.$http.httpUrl("/examroomstudent/addSelectStudent"),
          roomStudent
        )
        .then((response) => {
          if (response.data.code === 1) {
            this.$message.success("添加成功");
            that.getInfoStudentList();
          }
        });
      // console.log(room.id);
    },

    //批量删除学员
    delSelectStduent() {
      let ids = "";
      let arr = [];
      arr = this.stuList;
      arr.forEach((value, index) => {
        ids += value.id + ",";
      });
      
      this.axios
        .get(this.$http.httpUrl(`/examroomstudent/delectStudentAllById`), {
          params: {
            id: ids,
          },
        })
        .then((response) => {
          console.log( "成功移除",response)
          // if (response.data === 1) {
            this.$message({
              type: "success",
              message: "成功移除" + response.data + "个学生",
            });
            this.getExamRoomStudentList();
          // }
        });
    },

    //分页
    handleSizeChange(val) {
      this.pageNumber = 1;
      this.pageSize = val;
      if (this.activeName == "addManage") {
        this.getInfoStudentList();
      } else {
        this.getExamRoomStudentList();
      }
    },
    handleCurrentChange(val) {
      this.pageNumber = val;
      if (this.activeName == "addManage") {
        this.getInfoStudentList();
      } else {
        this.getExamRoomStudentList();
      }
    },
  },
};
</script>
